<!--A Design by W3layouts 
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
    <title>Sport A Ecommerce Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Sport Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!--//fonts-->

</head>
<body>
<div id="app">

    <!--header-->
    <div class="line">

    </div>
    <div class="header">
        <div class="logo">
            <a href="index.html"><img src="images/logo.png" alt=""></a>
        </div>
        <div class="header-top">
            <div class="header-grid">
                <ul class="header-in">
                    <li><a href="account.html">我的账户 </a></li>
                    <li>
                        <select class="in-drop">
                            <option value="Yuan" class="in-of">人民币</option>
                            <option value="Dollars" class="in-of">美元</option>
                            <option value="Euro" class="in-of">欧元</option>
                        </select>
                    </li>
                </ul>
                <div class="search-box">
                    <!--                    <div id="sb-search" class="sb-sea rch" :class="{sb-search-open:isSearch==false , :isSearch==true}">-->
                    <div id="sb-search" class="sb-search" :class="{ 'sb-search-open': isSearch }">
                        <form>
                            <input class="sb-search-input" placeholder="输入您的搜索词..." type="search" name="search"
                                   id="search">
                            <input class="sb-search-submit" type="button" value="" @click="isSearch=!isSearch">
                            <!--                                <input class="sb-search-submit" type="submit" value="">-->
                            <span class="sb-icon-search"> </span>
                        </form>
                    </div>
                </div>
                <div class="online">
                    <a href="single.html">网上购物</a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="header-bottom">
                <div class="h_menu4"><!-- start h_menu4 -->
                    <a class="toggleMenu" href="#">Menu</a>
                    <ul class="nav">
                        <li class="active" v-for="(item,index) in sstyle" :key="index"
                            @click="findStyleShoes(item.styleid)"><a
                                :href="'product.html#'+item.styleid">{{item.style}}</a></li>
                        <li><a href="product.html">更多 <i> </i></a>
                            <ul>
                                <li><a href="cart.html">购物车</a></li>
                                <li><a href="account.html">账户</a></li>
                                <li><a href="register.html">注册</a></li>
                            </ul>
                        </li>
                    </ul>

                </div><!-- end h_menu4 -->
                <ul class="header-bottom-in">
                    <li>
                        <select class="drop">
                            <option value="Yuan" class="in-of">活跃起来</option>
                            <option value="Euro" class="in-of">活跃起来1</option>
                            <option value="Dollars" class="in-of">活跃起来2</option>
                        </select>
                    </li>
                    <li>
                        <select class="drop">
                            <option value="Yuan" class="in-of">社区</option>
                            <option value="Euro" class="in-of">社区1</option>
                            <option value="Dollars" class="in-of">社区2</option>
                        </select>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <!---->
    <div class="banner">
        <div class="container">
            <div class="banner-matter">
                <h1>活跃起来，开始跑步<span>挑战极限</span></h1>
                <div class="out">
                    <a href="single.html" class="find">了解更多</a>
                    <a href="single.html" class="shop">店铺</a>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
    <!---->
    <div class="content">
        <div class="sport-your">
            <!-- requried-jsfiles-for owl -->
            <link href="css/owl.carousel.css" rel="stylesheet">
            <!--										<script>-->
            <!--											$(document).ready(function() {-->
            <!--											  $("#owl-demo").owlCarousel({-->
            <!--												items : 5,-->
            <!--												lazyLoad : true,-->
            <!--												autoPlay : true,-->
            <!--												navigation : true,-->
            <!--												navigationText :  true,-->
            <!--												pagination : false,-->
            <!--											  });-->
            <!--											});-->
            <!--										  </script>-->
            <!-- //requried-jsfiles-for owl -->

            <!-- start content_slider -->
            <div class="line1">

            </div>
            <div id="example1">
                <div id="owl-demo" class="owl-carousel text-center">
                    <div class="item">
                        <a href="single.html" title="image" rel="title1">
                            <img class="img-responsive " src="images/pic.jpg" alt="">
                            <div class="run">
                                <i> </i>
                                <p>RUNNING</p>
                            </div>
                        </a>
                    </div>
                    <div class="item">
                        <a href="single.html" title="image" rel="title1">
                            <img class="img-responsive " src="images/pic1.jpg" alt="">
                            <div class="run">
                                <i class="foot-in"> </i>
                                <p>FOOTBALL</p>
                            </div>
                        </a>
                    </div>
                    <div class="item">
                        <a href="single.html" title="image" rel="title1">
                            <img class="img-responsive " src="images/pic2.jpg" alt="">
                            <div class="run">
                                <i class="cycling"> </i>
                                <p>CYCLING</p>
                            </div>
                        </a>
                    </div>
                    <div class="item">
                        <a href="single.html" title="image" rel="title1">
                            <img class="img-responsive " src="images/pic3.jpg" alt="">
                            <div class="run">
                                <i class="fitness"> </i>
                                <p>FITNESS</p>
                            </div>
                        </a>
                    </div>
                    <div class="item">
                        <a href="single.html" title="image" rel="title1">
                            <img class="img-responsive " src="images/pic4.jpg" alt="">
                            <div class="run">
                                <i class="tennis"> </i>
                                <p>TENNIS</p>
                            </div>
                        </a>
                    </div>
                    <div class="item">
                        <a href="single.html" title="image" rel="title1">
                            <img class="img-responsive " src="images/pic.jpg" alt="">
                            <div class="run">
                                <i> </i>
                                <p>RUNNING</p>
                            </div>
                        </a>
                    </div>
                    <div class="item">
                        <a href="single.html" title="image" rel="title1">
                            <img class="img-responsive " src="images/pic1.jpg" alt="">
                            <div class="run">
                                <i class="foot-in"> </i>
                                <p>FOOTBALL</p>
                            </div>
                        </a>
                    </div>
                    <div class="item">
                        <a href="single.html" title="image" rel="title1">
                            <img class="img-responsive " src="images/pic2.jpg" alt="">
                            <div class="run">
                                <i class="cycling"> </i>
                                <p>CYCLING</p>
                            </div>
                        </a>
                    </div>
                    <div class="item">
                        <a href="single.html" title="image" rel="title1">
                            <img class="img-responsive " src="images/pic3.jpg" alt="">
                            <div class="run">
                                <i class="fitness"> </i>
                                <p>FITNESS</p>
                            </div>
                        </a>
                    </div>
                    <div class="item">
                        <a href="single.html" title="image" rel="title1">
                            <img class="img-responsive " src="images/pic4.jpg" alt="">
                            <div class="run">
                                <i class="tennis"> </i>
                                <p>TENNIS</p>
                            </div>
                        </a>
                    </div>
                    <div class="item">
                        <a href="single.html" title="image" rel="title1">
                            <img class="img-responsive " src="images/pic.jpg" alt="">
                            <div class="run">
                                <i> </i>
                                <p>RUNNING</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <h6 class="your-in">Your sport</h6>
            <div class="line2">

            </div>
        </div>
        <!--//sreen-gallery-cursual---->
        <div class="content-grids">

            <div class="col-md-4 content-grid" v-for="(item,index) in shoes" :key="item.sid">
                <a :href="'single.html#' + item.sid" class="lot"><img class="img-responsive " :src="item.photourl"
                                                                      alt=""></a>
                <div class="shoe">
                    <p>{{item.sdescription}}</p>
                    <label>${{item.sprice}}</label>
                    <a :href="'single.html#' + item.sid">查看该商品</a>
                </div>
                <div class="clearfix"></div>
                <b class="plus-in" @click="addCart(item.sid,1)">+</b>
            </div>

            <!--分页层-->
            <div style="background-color: white;color: red;text-align: center;" v-cloak>
                <a @click.prevent="clickPage(1)">第一页</a>
                <a @click.prevent="clickPage(pagebean.pre)" :page-data="pagebean.pre">上一页{{pagebean.pre}}</a>
                <a @click.prevent="clickPage(pagebean.next)" :page-data="pagebean.next">下一页{{pagebean.next}}</a>
                <a @click.prevent="clickPage(pagebean.totalpages)"
                   :page-data="pagebean.totalpages">最后一页{{pagebean.totalpages}}</a>
                总共条{{pagebean.total}}记录/共分{{pagebean.totalpages}}页，
                每页{{pagebean.pagesize}}条，当前第{{pagebean.pageno}}页
                按<select id="sortby" v-model="pagebean.sortby">
                <option value="sid" selected>商品编号</option>
                <option value="sprice">成交价格</option>
            </select>
                <select id="sort" v-model="pagebean.sort">
                    <option value="asc" selected>升序</option>
                    <option value="desc">降序</option>
                </select>
            </div>

            <div class="clearfix"></div>
        </div>
        <!---->
        <div class="content-top">
            <div class="col-md-4 top-content">
                <a href="single.html"><img class="img-responsive " src="images/pi.jpg" alt=""></a>
            </div>
            <div class="col-md-4 top-content">
                <a href="single.html"><img class="img-responsive " src="images/pi1.jpg" alt=""></a>
            </div>
            <div class="col-md-4 top-content">
                <a href="single.html"><img class="img-responsive " src="images/pi2.jpg" alt=""></a>
            </div>

            <div class="clearfix"></div>
        </div>
        <div class="content-bottom">
            <div class="col-md-8 bottom-content">

                <div class="slider">
                    <div class="callbacks_container">
                        <ul class="rslides" id="slider">
                            <li>
                                <img src="images/vi.jpg" alt="">

                            </li>
                            <li>
                                <img src="images/v2.jpg" alt="">

                            </li>
                            <li>
                                <img src="images/vi.jpg" alt="">

                            </li>
                        </ul>
                    </div>
                    <div class="london">
                        <h5>London Marathon 2013</h5>
                        <p>24/2013 - 6Mins</p>
                    </div>
                </div>

            </div>
            <div class="col-md-4 bottom-grid">
                <h4>Latest Sport News</h4>
                <div class="news">
                    <span>25/07</span>
                    <p>Sporting wonders have come so thick and fast since last summer that we decided it... time </p>
                    <div class="foot">
                        <label>football</label>
                        <ul class="eye ">
                            <li><span><i> </i>315</span></li>
                            <li><a href="#"><i class="comment"> </i> 3</a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="news">
                    <span>25/07</span>
                    <p>Sporting wonders have come so thick and fast since last summer that we decided it... time </p>
                    <div class="foot">
                        <label>football</label>
                        <ul class="eye ">
                            <li><span><i> </i>315</span></li>
                            <li><a href="#"><i class="comment"> </i> 3</a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="news">
                    <span>25/07</span>
                    <p>Sporting wonders have come so thick and fast since last summer that we decided it... time </p>
                    <div class="foot">
                        <label>football</label>
                        <ul class="eye ">
                            <li><span><i> </i>315</span></li>
                            <li><a href="#"><i class="comment"> </i> 3</a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <a href="#" class="view">view all articles</a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!--footer-->
    <div class="footer">
        <div class="col-md-3 footer-left">
            <h4>体育</h4>
            <div class="run-top">
                <ul class="run-grid">
                    <li><a href="#">运动</a></li>
                    <li><a href="#">循环</a></li>
                    <li><a href="#">铁人三项</a></li>
                    <li><a href="#">健康</a></li>
                    <li><a href="#">网球</a></li>
                    <li><a href="#">更多运动</a></li>
                </ul>
                <ul class="run-grid">
                    <li><a href="#">风格</a></li>
                    <li><a href="#">特殊</a></li>
                    <li><a href="#">品牌活动</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 footer-left left-footer">
            <h4>最近的</h4>
            <div class="run-top top-run">
                <ul class="run-grid">
                    <li><a href="#">新闻 & 活动</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">购物</a></li>
                    <li><a href="#">赞助</a></li>
                    <li><a href="#">更多运动</a></li>
                </ul>
                <ul class="run-grid">
                    <li><a href="#">俱乐部 & 培训 </a></li>
                    <li><a href="#">活动地图</a></li>
                    <li><a href="#">挑战世界</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-2 footer-left left-footer">
            <h4>您的账户</h4>
            <ul class="run-grid-in">
                <li><a href="account.html">登录</a></li>
                <li><a href="#">我的运动</a></li>
                <li><a href="#">我的活动</a></li>
            </ul>
        </div>
        <div class="col-md-4 footer-left left-footer">
            <ul class="social-in">
                <li><a href="#"><i> </i></a></li>
                <li><a href="#"><i class="youtube"> </i></a></li>
                <li><a href="#"><i class="facebook"> </i></a></li>
                <li><a href="#"><i class="twitter"> </i></a></li>
            </ul>
            <div class="letter">
                <h5>通讯</h5>
                <span>在下一篇文章中</span>
                <h6>NRL：本周末我们学到的五件事</h6>
                <p>支持郊区游戏;勇士撕裂</p>
                <a href="register.html" class="sign">注册并获取更多</a>
                <p class="footer-class"> © 2015 Sport 版权所有 |<a href="http://w3layouts.com/" target="_blank">W3layouts</a>的模板
                </p>
            </div>

        </div>
        <div class="clearfix"></div>
    </div>
</div>

<!-- search-scripts -->
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<!-- //search-scripts -->
<script type="text/javascript" src="js/nav.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/owl.carousel.js"></script>

<script src="js/jquery-1.9.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        //model数据
        data: {
            //注册与登录数据
            username: 'joker',
            pwd: 'a',
            valcode: '',	//验证码

            isSearch: false,     //搜索框显示状态
            isLogin: false,		//记录当前登录状态

            shoes: [],		//商品数组
            sstyle: [],	//商品类型

            //分页查询
            pagebean:{
                pageno:1,
                pagesize:9,
                sortby:'sid',
                sort:'asc',

                total:0,
                totalpages:0,
                pre:1,
                next:1,
            }
        },
        methods: {
            //分页点击事件
            clickPage:function ( pageno ){
                var promise = this.showPage(pageno);
                promise.then( result=>{
                    this.displayPage(result.data);
                });
            },
            //分页查询显示菜单
            showPage:function ( pageno ){	//在mounted中调用的，返回一个promise对象
                var params = new URLSearchParams();
                params.append("pageno",pageno);
                params.append("sortby",this.pagebean.sortby);
                params.append("sort",this.pagebean.sort);
                //返回一个Promise
                return  axios.post("shoes.action?op=findFoodsByPage",params);
            },
            displayPage: function (result) {
                let jsonModel2 = result;
                if (jsonModel2.code == 1) {
                    //显示数据到界面
                    vm.$data.shoes = jsonModel2.obj.dataset;//菜品列表显示
                    vm.$data.pagebean = jsonModel2.obj;
                }
            },
            //加入购物车
            addCart:function (sid,num){
                //发出请求
                var params = new URLSearchParams();
                params.append("sid",sid);
                params.append("num",num);
                //post()返回值  Promise                   result是响应的结果(headers,data)
                axios.post('order.action?op=order', params).then(result=>{
                    let jm = result.data;
                    if (jm.code==1){
                        //TODO:显示购物车
                        alert("添加购物车成功....");
                    }else if (jm.code==0){
                        alert("添加购物车失败....");
                    }else{
                        alert("请登录....")
                    }
                });
            },
            //登录状态
            checkLogin: function () {
                return axios.get("user.action?op=checkLogin");
            },
            //初始化菜单界面
            findAllShoes: function () {
                return axios.get("shoes.action?op=findAllShoes");
            },
            //显示商品分类栏
            findStyle: function () {
                return axios.get("shoes.action?op=findStyle");
            },
            //点击商品分类查询
            findStyleShoes: function (styleid) {
                var params = new URLSearchParams();
                params.append("styleid", styleid);
                axios.post("shoes.action?op=findStyleShoes", params).then(result => {
                    vm.$data.shoes = result.data.obj;
                });
            },
        },
        mounted: function () {
            axios.all([this.checkLogin(), this.showPage(1), this.findStyle()]).then(
                axios.spread((d1, d2, d3) => {
                    if (d1.data.code == 1) {
                        //vm.$data.指的是model中的数据
                        //this.username:这是view-model中的数据
                        vm.$data.username = d1.data.obj.username;
                        vm.$data.isLogin = true;
                    }

                    if (d2.data.code == 1) {
                        vm.displayPage(d2.data);
                    }

                    if (d3.data.code == 1) {
                        vm.$data.sstyle = d3.data.obj;
                    }

                })
            );
        },
    });

</script>
</body>
</html>